<script setup>
import {useApi} from "../../composables/useApi.js"
import showTost from '@/components/toast/index.js'
import {storeToRefs} from "pinia"
import {useAppStore} from "../../store/app.js"

const appStore = useAppStore()

const {nationArr, sexArr} = storeToRefs(appStore)
import {reactive, ref} from "vue"
import StandardGradeDrawear from "@/pages/platform/components/standardGradeDrawear.vue";
import {router} from "@/plugins/1.router/index.js";
import * as XLSX from "xlsx";
import {getStudentList} from "@/api/student.js";
import {standardAddModify, standardDelete} from "@/api/standard.js";
import ModelHeader from "@/pages/platform/components/modelHeader.vue";
import UploadOhterImg from "@/components/uploadOhterImg.vue";
import {medalAddModify, medalDelete, medalRecordAddModify, medalRecordDelete} from "@/api/medal.js";
import MedalDrawear from "@/pages/platform/components/medalDrawear.vue";
import {multiHeaders} from "@/pages/community/enumeration.js";
//基本数据list
let list = ref([])
let page = ref(1)
let limit = ref(20)
let total = ref(0)//总数
const selected = ref([])
let queryFrom = ref({page: 1, limit: 20,})
const route = useRoute()
const headers = ref([])
const titleList = {
  0: '分组管理',
  1: '通知管理',
  3: '添加作业'
}
const examcourse_id = ref(null)
const headerTabs = ref(1)

// todo 复制修改列表接口
const getList = async () => {
  if (headerTabs.value == 0) {
    const {data} = await useApi('/teacher/Api.Group/index').post({...queryFrom.value,catetype:4, mass_id: route.query.mass_id})
    total.value = data.value.data.total
    list.value = data.value.data.data.map(item => {
      return {
        ...item, id: item.group_id
      }
    })
  } else if (headerTabs.value === 1) {
    const {data} = await useApi('/student/Api.Inform/index').post({...queryFrom.value,catetype:4,})
    total.value = data.value.data.total
    list.value = data.value.data.data.map(item => {
      return {
        ...item, id: item.inform_id
      }
    })
  } else if (headerTabs.value === 2) {
    const {data} = await useApi('/student/Api.OneKey/index').post({
      ...queryFrom.value,
      catetype:4
    })
    total.value = data.value.data.total
    list.value = data.value.data.data.map(item => {
      return {
        ...item, id: item.onekey_id
      }
    })
  } else if (headerTabs.value === 3) {
    const {data} = await useApi('/student/Api.Job/index').post({...queryFrom.value,catetype:4, mass_id: route.query.mass_id})
    total.value = data.value.data.total
    list.value = data.value.data.data.map(item => {
      return {
        ...item, id: item.job_id
      }
    })
  } else if (headerTabs.value === 4) {
    const {data} = await useApi('/teacher/Api.StudentList/index').post({
      ...queryFrom.value,
      catetype:4,
      mass_id: route.query.mass_id
    })
    total.value = data.value.data.total
    list.value = data.value.data.data.map(item => {
      return {
        ...item, id: item.studentlist_id
      }
    })
  }

}

const dialogFlag = ref(false)
// 头部表单回调
const onChange = val => {
  let data = JSON.parse(JSON.stringify(val))
  queryFrom.value = {...queryFrom.value, ...data}
  getList()
}
const isConfirmDialogVisible = ref(false)
// 删除确认弹窗
const onHandleDelete = async (val) => {
  console.log(val)
  if (headerTabs.value == 0) {
    let ids = val.data.map(item => item.group_id).toString()
    console.log(ids)
    const {data} = await useApi('/teacher/Api.Group/delete').post({group_id: ids,catetype:4,})
    console.log(data.value)
    if (data.value.status == 200) {
      showTost("删除成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      isConfirmDialogVisible.value = false
      if (val.type == 'detail') {
        dialogFlag.value = false
      }
      getList()
    }
  } else if (headerTabs.value === 1) {
    let ids = val.data.map(item => item.inform_id).toString()
    console.log(ids)
    const {data} = await useApi('/student/Api.Inform/delete').post({inform_id: ids,catetype:4,})
    console.log(data.value)
    if (data.value.status == 200) {
      showTost("删除成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      isConfirmDialogVisible.value = false
      if (val.type == 'detail') {
        dialogFlag.value = false
      }
      getList()
    }
  } else if (headerTabs.value === 2) {
    let ids = val.data.map(item => item.onekey_id).toString()
    console.log(ids)
    const {data} = await useApi('/student/Api.OneKey/delete').post({onekey_id: ids, isMass: 1,catetype:4,})
    console.log(data.value)
    if (data.value.status == 200) {
      showTost("删除成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      isConfirmDialogVisible.value = false
      if (val.type == 'detail') {
        dialogFlag.value = false
      }
      getList()
    }
  } else if (headerTabs.value === 3) {
    let ids = val.data.map(item => item.job_id).toString()
    console.log(ids)
    const {data} = await useApi('/student/Api.Job/delete').post({job_id: ids,catetype:4,})
    console.log(data.value)
    if (data.value.status == 200) {
      showTost("删除成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      isConfirmDialogVisible.value = false
      if (val.type == 'detail') {
        dialogFlag.value = false
      }
      getList()
    }
  } else if (headerTabs.value === 4) {
    let ids = val.data.map(item => item.studentlist_id).toString()
    console.log(ids)
    const {data} = await useApi('/teacher/Api.StudentList/delete').post({studentlist_id: ids,catetype:4,})
    console.log(data.value)
    if (data.value.status == 200) {
      showTost("删除成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      isConfirmDialogVisible.value = false
      if (val.type == 'detail') {
        dialogFlag.value = false
      }
      getList()
    }
  }


}
const selectedItems = ref([]);

// 确认弹窗文本
const confirmMsg = ref('')
const currentOptionData = ref({})

// 打开删除弹窗
const onHandleDialog = (type) => {
  if (type == 'delete') {
    console.log(selectedItems)
    if (selectedItems.value.length == 0) return
    let data = list.value.filter(item => selectedItems.value.find(val => val == item.id))
    console.log(data)
    currentOptionData.value = {
      data: data,
      type: 'list'
    }
    confirmMsg.value = `确认删除${headerTabs.value == 1 ? data.map(item => item.medalTitle).toString() : data.map(item => item.title).toString()}的信息吗?`
    isConfirmDialogVisible.value = true
  } else if (type == 'openSecondPage') {
    router.push('/platform/times-manage?type=2')
  } else {
    form.mass_title = route.query.title
    addDialogFlag.value = true
  }
}
// 详情数据
const detailData = ref({})

// 去详情
const viewDetail = async (item) => {
  console.log(item)
  const detailList = [
    '/teacher/Api.Group/detail',
    '/student/Api.Inform/detail',
    '/student/Api.OneKey/detail',
    '/student/Api.Job//detail',
    '/teacher/Api.Mass/detail',
  ]
  const {data} = await useApi(detailList[headerTabs.value]).post({
    group_id: item.group_id,
    inform_id: item.inform_id,
    catetype:4,
    job_id: item.job_id,
    onekey_id: item.onekey_id,
    studentlist_id: item.studentlist_id,
    isMass: headerTabs.value == 2 ? 1 : '',
    mass_id: route.query.mass_id
  })
  console.log(data)
  detailData.value = {...data.value.data,mass_title: route.query.title}
  dialogFlag.value = true
}
// 添加教师弹窗falg
const addDialogFlag = ref(false)
const refVForm = ref()


// 新增取消回调
const resetForm = () => {
  refVForm.value?.reset()
  addDialogFlag.value = false
}


const valid = ref(false)
const form = reactive({
  title: '',
  mass_id: route.query.mass_id,
  mass_title: route.query.title,
  // 公告时间
  sendTime: '',
  // 内容
  content: '',
  // 关联项目
  subject: null,
  studentNum: '',
  teacherNum: '',
  score: '', //分值
  info: '', //章简介
  icon: '', //奖章图标
})

let totalScore = computed(() => {
  return Number(form.languageScore) + Number(form.mathsScore) + Number(form.englishScore)
})

const confirmAdd = async (args) => {
  console.log(totalScore.value)
  if (!valid.value) return
  if (headerTabs.value == 0) {
    medalAddModify({...form}).then(res => {
      refVForm.value?.reset()
      addDialogFlag.value = false
      showTost("新增成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      getList()
    })
  } else {
    medalRecordAddModify({...form}).then(res => {
      refVForm.value?.reset()
      addDialogFlag.value = false
      showTost("新增成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      getList()
    })
  }


}
let sexList = ref(['男', '女'])
const onHandleEdit = () => {
  queryFrom.value.page = 1
  getList()
}
getList()
const required = (value, name) => !!value || `${name}为必填字段`;

const import_page = ref(1)
const import_limit = ref(10)
const import_percent = ref(0)
const loading = ref(false)


const onChangePage = (val) => {
  queryFrom.value.page = val.page
  queryFrom.value.limit = val.limit
  getList()
}
const drawaerDelete = async (val) => {
  console.log(val)
  currentOptionData.value = {
    data: [val],
    type: 'detail'
  }
  confirmMsg.value = `确认删除${val.title}的信息吗`
  isConfirmDialogVisible.value = true
}
const viewDetailClassStudent = (type, item) => {
  showTost('暂未开放')
  if (type == 'class') {

  }
}
// 二级页面显示开关
const secondPageShowFlag = ref(false)
const onHandleSecondPage = () => {
  secondPageShowFlag.value = true
}
const examTitle = ref('')
const changeId = (val) => {
  examcourse_id.value = val.id
  examTitle.value = val.title
  getList()
}

const onlyAllowNumbers = (event) => {
  const key = event.key;
  // 检查按键是否为数字或控制键（如 backspace）
  if (!/^\d$/.test(key) && event.key !== 'Backspace' && event.key !== 'Tab') {
    event.preventDefault();
  }
}
const filterInput = (key) => {
  // 仅保留数字
  form[key] = form[key].replace(/\D/g, '');
}

const projectList = ref(['德', '智', '体', '美', '劳'])

// 获取教师列表结束
const typeList = ref([{title: '班级管理', value: 1}, {title: '校园管理', value: 2}, {
  title: '年级管理',
  value: 3
}, {title: '社团管理', value: 4}])

const scoreModeList = [{
  label: '小组',
  value: 1
}, {
  label: '个人',
  value: 2
}]

const handleHeaderTabs = (index) => {
  headerTabs.value = index
  headers.value = multiHeaders[index]
  headerTabs.value = index
  list.value = []
  queryFrom.value.page = 1
  getList()

}
headers.value = multiHeaders[headerTabs.value]
const confirmAddTeacher = async () => {

  if (!valid.value) return
  if (headerTabs.value == 0) {
    const {data} = await useApi('/teacher/Api.Group/add').post({...form, mass_id: route.query.mass_id,catetype:4,})
    if (data.value.status == 200) {
      refVForm.value?.reset()

      addDialogFlag.value = false
      showTost("新增成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      getList()
    } else {
      console.log(data.value.msg)
      // showTost("新增成功", {duration: 3000, type: "success"})

      showTost(data.value.msg, {duration: 3000, type: "error"})
    }
  } else if (headerTabs.value === 1) {
    const {data} = await useApi('/student/Api.Inform/add').post({...form, mass_id: route.query.mass_id,catetype:4,})
    if (data.value.status == 200) {
      refVForm.value?.reset()

      addDialogFlag.value = false
      showTost("新增成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      getList()
    } else {
      console.log(data.value.msg)
      // showTost("新增成功", {duration: 3000, type: "success"})

      showTost(data.value.msg, {duration: 3000, type: "error"})
    }
  } else if (headerTabs.value === 3) {
    const {data} = await useApi('/student/Api.Job/add').post({...form, mass_id: route.query.mass_id,catetype:4,})
    if (data.value.status == 200) {
      refVForm.value?.reset()

      addDialogFlag.value = false
      showTost("新增成功", {duration: 3000, type: "success"})
      queryFrom.value.page = 1
      getList()
    } else {
      console.log(data.value.msg)
      // showTost("新增成功", {duration: 3000, type: "success"})

      showTost(data.value.msg, {duration: 3000, type: "error"})
    }
  }
}
const goRecord = (val, type) => {
  if (headerTabs.value === 0) {
    router.push(`/platform/packetStaff?type=${type}&name=${val.title}&id=${val.group_id}&mass_id=${route.query.mass_id}`)
  }
  // router.push( '/platform/times-manage?type=1')

//    todo 去记录页
}
// 班级不分页列表开始
// const classList = ref([])
// const getClassList = async (id='') => {
//   const {data} = await useApi('/teacher/Api.GradeClass/indexList').post({grade_id:id})
//   if (data.value.status == 200) {
//     console.log(data.value.data)
//     classList.value = data.value.data
//   }
// }
// getClassList()
// 班级不分页列表结束

const qualityList = [{title: '德', value: 1},{title: '智', value: 1}, {title: '体', value: 1},
  {title: '美', value: 1}, {title: '劳', value: 1}]

const isEdit = ref(false)
const onHandleEditData = async () => {
  if (isEdit.value === true) {
    if (!valid.value) return
    if (headerTabs.value == 0) {
      const {data} = await useApi('/teacher/Api.Group/add').post({...detailData.value, mass_id: route.query.mass_id,catetype:4,})
      if (data.value.status == 200) {
        refVForm.value?.reset()

        addDialogFlag.value = false
        dialogFlag.value = false
        showTost("修改成功", {duration: 3000, type: "success"})
        queryFrom.value.page = 1
        getList()
      } else {
        console.log(data.value.msg)
        // showTost("新增成功", {duration: 3000, type: "success"})

        showTost(data.value.msg, {duration: 3000, type: "error"})
      }
    } else if (headerTabs.value === 1) {
      const {data} = await useApi('/student/Api.Inform/add').post({...detailData.value,catetype:4,})
      if (data.value.status == 200) {
        refVForm.value?.reset()
        dialogFlag.value = false

        addDialogFlag.value = false
        showTost("修改成功", {duration: 3000, type: "success"})
        queryFrom.value.page = 1
        getList()
      } else {
        console.log(data.value.msg)
        // showTost("新增成功", {duration: 3000, type: "success"})

        showTost(data.value.msg, {duration: 3000, type: "error"})
      }
    } else if (headerTabs.value === 3) {
      const {data} = await useApi('/student/Api.Job/add').post({...detailData.value, mass_id: route.query.mass_id,catetype:4,})
      if (data.value.status == 200) {
        refVForm.value?.reset()
        dialogFlag.value = false

        addDialogFlag.value = false
        showTost("修改成功", {duration: 3000, type: "success"})
        queryFrom.value.page = 1
        getList()
      } else {
        console.log(data.value.msg)
        // showTost("新增成功", {duration: 3000, type: "success"})

        showTost(data.value.msg, {duration: 3000, type: "error"})
      }
    }
  } else {
    isEdit.value = true
  }
}
const closeDarwear = ()=>{
  refVForm.value?.reset()
}
const scoring =(val)=> {

  router.push(`/scoring/scoring?id=${val.studentId}&modify=${val.scoreTime?1:2}`)
}
</script>

<template>
  <div class="content">
    <!--   Ought to 修改右侧抽屉-->
    <custom-drawear :tabs-index="headerTabs"
                    @onHandleEdit="onHandleEdit"
                    @update:isDrawerOpen="dialogFlag=$event"
                    :is-drawer-open="dialogFlag">
      <div v-if="headerTabs === 0"  >
        <VForm
          :disabled="!isEdit"
          v-model="valid"
          ref="refVForm"
        >
          <VRow>
            <VCol cols="6">
              <VTextField
                v-model="detailData.title"
                label="小组名称"
                :rules="[(val)=>required(val,'小组名称')]"
              >
                <template v-slot:label>
                  <span>小组名称</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VSelect
                v-model="detailData.type"
                :items="typeList"
                item-title="title"
                item-value="value"
                :rules="[(val)=>required(val,'分组类型')]"
                class="input-width-height"
              >
                <template v-slot:label>
                  <span>分组类型</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VSelect>
            </VCol>
            <!--                  年级选择器-->

            <VCol cols="6">
              <VTextField
                disabled
                v-model="detailData.mass_title"
                label="归属对象"
                :rules="[(val)=>required(val,'归属对象')]"
              >
                <template v-slot:label>
                  <span>归属对象</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VTextField
                disabled
                v-model="detailData.studentNum"
                label="学生人数"
              >
                <template v-slot:label>
                  <span>学生人数</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VTextField
                disabled
                v-model="detailData.teacherNum"
                label="职员"
              >
                <template v-slot:label>
                  <span>职员</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextField>
            </VCol>
          </VRow>
        </VForm>
      </div>
      <div v-if="headerTabs === 1" >
        <VForm
          :disabled="!isEdit"
          v-model="valid"
          ref="refVForm"
        >
          <VRow>
            <VCol cols="12">
              <VTextField
                v-model="detailData.title"
                :rules="[(val)=>required(val,'标题')]"
              >
                <template v-slot:label>
                  <span>标题</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="12">
              <AppDateTimePicker
                class="input-width-height"
                v-model="detailData.sendTime"
                label="公告日期"
                placeholder="请选择公告日期"
                :rules="[(val)=>required(val,'公告日期')]"
              >
                <template v-slot:label>
                  <span>公告日期</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </AppDateTimePicker>
            </VCol>
            <VCol cols="12">
              <VTextarea
                type="textarea"
                v-model="detailData.content"
                label="内容"
                :rules="[(val)=>required(val,'内容')]"
                placeholder="请输入"
              >
                <template v-slot:label>
                  <span>内容</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextarea>
            </VCol>
          </VRow>
        </VForm>
      </div>
      <div v-if="headerTabs === 2" >
        <VForm
          :disabled="!isEdit"
          v-model="valid"
          ref="refVForm"
        >
          <VRow>
            <VCol cols="6">
              <VTextField
                v-model="detailData.studentName"
              >
                <template v-slot:label>
                  <span>学生姓名</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VTextField
                v-model="detailData.studentId"
              >
                <template v-slot:label>
                  <span>学生ID</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VTextField
                v-model="detailData.relevance"
              >
                <template v-slot:label>
                  <span>得分项目</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VTextField
                v-model="detailData.score"
              >
                <template v-slot:label>
                  <span>分值</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VTextField
                v-model="detailData.create_time"
              >
                <template v-slot:label>
                  <span>得分时间</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VTextField
                v-model="detailData.teacherName"
              >
                <template v-slot:label>
                  <span>评分老师</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="6">
              <VSelect
                v-model="detailData.type"
                :items="scoreModeList"
                item-title="label"
                item-value="value"
                placeholder="请选择评分方式"
                label="评分方式"
                class="input-width-height"
              >
                <template v-slot:label>
                  <span>评分方式</span>
                </template>
              </VSelect>
            </VCol>
            <VCol cols="12">
              <VTextarea
                type="textarea"
                v-model="detailData.content"
                label="内容"
              >
                <template v-slot:label>
                  <span>内容</span>
                </template>
              </VTextarea>
            </VCol>
          </VRow>
        </VForm>
      </div>
      <div v-if="headerTabs === 3" >
        <VForm
          v-model="valid"
          ref="refVForm"
          :disabled="!isEdit"
        >
          <VRow>
            <VCol cols="12">
              <VTextField
                v-model="detailData.title"
                :rules="[(val)=>required(val,'作业标题')]"
              >
                <template v-slot:label>
                  <span>作业标题</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextField>
            </VCol>
            <VCol cols="12">
              <AppDateTimePicker
                class="input-width-height"
                v-model="detailData.sendTime"
                placeholder="请选择"
                :rules="[(val)=>required(val,'作业时间')]"
              >
                <template v-slot:label>
                  <span>作业时间</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </AppDateTimePicker>
            </VCol>
            <VCol cols="12">
              <VSelect
                v-model="detailData.subject"
                :items="qualityList"
                item-title="title"
                item-value="value"
                :rules="[(val)=>required(val,'关联项目')]"
                class="input-width-height"
              >
                <template v-slot:label>
                  <span>关联项目</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VSelect>
            </VCol>
            <VCol cols="12">
              <VTextField
                v-model="detailData.content"
                :rules="[(val)=>required(val,'作业内容')]"
              >
                <template v-slot:label>
                  <span>作业内容</span>
                  <span style="color: red;margin-left: 4px;">*</span>
                </template>
              </VTextField>
            </VCol>
            <!--                  年级选择器-->


          </VRow>
        </VForm>

      </div>

    </custom-drawear>

    <ConfirmDialog
      :handleData="currentOptionData"
      v-model:isDialogVisible="isConfirmDialogVisible"
      @confirm="onHandleDelete"
      :confirm-msg="confirmMsg"
      :confirmation-question="confirmMsg"
      cancel-msg="Unsubscription Cancelled!!"
    />
    <!--    Ought to 修改顶部检索栏部分-->
    <!-- 头部 -->
    <custom-header title="分组列表"
                   :show-delete="false"
                   :show-button="false"
                   :button-text="titleList[headerTabs]"
                   @onChange="onChange"
                   @onHandle="onHandleDialog">
      <div class="tabs ">

        <div @click="handleHeaderTabs(1)" :class="{item: true, active: headerTabs === 1}">
          <i class="ri-pantone-line"></i>
          通知公告
        </div>
        <div @click="handleHeaderTabs(2)" :class="{item: true, active: headerTabs === 2}">
          <i class="ri-file-list-2-line"></i>
          素质评价记录
        </div>
        <div @click="handleHeaderTabs(3)" :class="{item: true, active: headerTabs === 3}">
          <i class="ri-pages-line"></i>
          作业管理
        </div>
      </div>
    </custom-header>
    <!--    <model-header :title="route.query.title"-->
    <!--                  button-text="添加奖章"-->
    <!--                  @tabsChange="tabsChange"-->
    <!--                  @onChange="onChange"-->
    <!--                  @changeId="changeId"-->
    <!--                  @onHandle="onHandleDialog"/>-->
    <VDataTable
      v-model="selectedItems"
      :headers="headers"
      :items="list"
      :items-per-page="100"
      item-key="id"
      show-select
      class="text-no-wrap"
    >

      <template #item.gradeTitle="{ item }">
        <div v-if="headerTabs ===4" class="options-right-display d-flex align-center justify-start">
          {{ item.gradeTitle }}
        </div>
        <div v-else>
          <div v-if="item.type==1" class="community-box">{{ item.classTitle }}</div>
          <div v-if="item.type==2" class="community-box" style="background-color:#FF4C5129;color:#FF4C51">
            {{ item.activeTitle }}
          </div>
          <div v-if="item.type==3" class="community-box" style="background-color:#FFB40029;color:#FFB400">
            {{ item.gradeTitle }}
          </div>
          <div v-if="item.type==4" class="community-box" style="background-color:#8C57FF29;color:#8C57FF">
            {{ item.massTitle }}
          </div>
        </div>
      </template>
      <template #item.type="{ item }">
        <div class="options-right-display d-flex align-center justify-start">
          {{ typeList[item.type - 1].title }}
        </div>
      </template>

      <template #item.options="{ item }">
        <div class="d-flex align-center options-right-display">
          <div class="d-flex align-center ms-3 cursor-pointer">
            <div v-if="[0].includes(headerTabs)" @click="goRecord(item,1)" class="me-4 cursor-pointer">学生管理</div>
            <div v-if="[0].includes(headerTabs)" @click="goRecord(item,2)" class="me-4 cursor-pointer">职员管理</div>
            <!--            <div v-if="headerTabs === 3" @click="goRecord(item,2)" class="me-4 cursor-pointer">作业记录</div>-->
            <div v-if="headerTabs === 4" @click="scoring(item)" class="me-4 cursor-pointer">{{item.scoreTime!=null?'查看':'打分'}}</div>
            <i v-if="[0,1,2,3].includes(headerTabs)" @click="viewDetail(item)" class="ri-menu-line"></i>
          </div>
        </div>
      </template>
    </VDataTable>

    <PaginationVue
      @onChange="onChangePage"
      :current-page="queryFrom.page"
      :page-size="queryFrom.limit"
      :total="total"
    />
    <!--    添加对话框-->
    <VDialog
      :persistent="true"
      max-width="600"
      :model-value="addDialogFlag"
    >
      <div v-if="headerTabs === 0" class="dialog-body" style="width: 600px">
        <AppDrawerHeaderSection
          title="添加分组"
          @cancel="addDialogFlag=false"
        />
        <VDivider class="v-divider"/>
        <VCard>
          <PerfectScrollbar
            :options="{ wheelPropagation: false }"
            class="h-60"
          >
            <VCardText>

              <VForm
                v-model="valid"
                ref="refVForm"
                @submit.prevent="confirmAddTeacher"
              >
                <VRow>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.title"
                      label="小组名称"
                      :rules="[(val)=>required(val,'小组名称')]"
                    >
                      <template v-slot:label>
                        <span>小组名称</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VSelect
                      v-model="form.type"
                      :items="typeList"
                      item-title="title"
                      item-value="value"
                      :rules="[(val)=>required(val,'分组类型')]"
                      class="input-width-height"
                    >
                      <template v-slot:label>
                        <span>分组类型</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VSelect>
                  </VCol>
                  <!--                  年级选择器-->

                  <VCol cols="6">
                    <VTextField
                      disabled
                      v-model="form.mass_title"
                      label="归属对象"
                      :rules="[(val)=>required(val,'归属对象')]"
                    >
                      <template v-slot:label>
                        <span>归属对象</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      disabled
                      v-model="form.studentNum"
                      label="学生人数"
                    >
                      <template v-slot:label>
                        <span>学生人数</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <VTextField
                      disabled
                      v-model="form.teacherNum"
                      label="职员"
                    >
                      <template v-slot:label>
                        <span>职员</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="12">
                    <div class="d-flex justify-end">
                      <VBtn
                        color="#fff"
                        class="me-4"
                        @click="resetForm"
                      >
                        取消
                      </VBtn>
                      <VBtn
                        type="submit"
                        color="primary"
                        class="me-4"
                      >
                        添加
                      </VBtn>
                    </div>
                  </VCol>
                </VRow>
              </VForm>
            </VCardText>
          </PerfectScrollbar>
        </VCard>

      </div>
      <div v-if="headerTabs === 1" class="dialog-body" style="width: 600px">
        <AppDrawerHeaderSection
          title="添加通知"
          @cancel="addDialogFlag=false"
        />
        <VDivider class="v-divider"/>
        <VCard>
          <PerfectScrollbar
            :options="{ wheelPropagation: false }"
            class="h-60"
          >
            <VCardText>

              <VForm
                v-model="valid"
                ref="refVForm"
                @submit.prevent="confirmAddTeacher"
              >
                <VRow>
                  <VCol cols="6">
                    <VTextField
                      v-model="form.title"
                      :rules="[(val)=>required(val,'标题')]"
                    >
                      <template v-slot:label>
                        <span>标题</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="6">
                    <AppDateTimePicker
                      class="input-width-height"
                      v-model="form.sendTime"
                      label="定时发送"
                      placeholder="请选择出生日期"
                      :rules="[(val)=>required(val,'出生日期')]"
                    >
                      <template v-slot:label>
                        <span>出生日期</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </AppDateTimePicker>
                  </VCol>
                  <VCol cols="12">
                    <VTextarea
                      type="textarea"
                      v-model="form.content"
                      label="内容"
                      :rules="[(val)=>required(val,'内容')]"
                      placeholder="请输入"
                    >
                      <template v-slot:label>
                        <span>内容</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextarea>
                  </VCol>
                  <!--                  年级选择器-->

                  <VCol cols="12">
                    <div class="d-flex justify-end">
                      <VBtn
                        color="#fff"
                        class="me-4"
                        @click="resetForm"
                      >
                        取消
                      </VBtn>
                      <VBtn
                        type="submit"
                        color="primary"
                        class="me-4"
                      >
                        添加
                      </VBtn>
                    </div>
                  </VCol>
                </VRow>
              </VForm>
            </VCardText>
          </PerfectScrollbar>
        </VCard>

      </div>
      <div v-if="headerTabs === 3" class="dialog-body" style="width: 600px">
        <AppDrawerHeaderSection
          title="添加作业"
          @cancel="addDialogFlag=false"
        />
        <VDivider class="v-divider"/>
        <VCard>
          <PerfectScrollbar
            :options="{ wheelPropagation: false }"
            class="h-60"
          >
            <VCardText>

              <VForm
                v-model="valid"
                ref="refVForm"
                @submit.prevent="confirmAddTeacher"
              >
                <VRow>
                  <VCol cols="12">
                    <VTextField
                      v-model="form.title"
                      :rules="[(val)=>required(val,'作业标题')]"
                    >
                      <template v-slot:label>
                        <span>作业标题</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <VCol cols="12">
                    <AppDateTimePicker
                      class="input-width-height"
                      v-model="form.sendTime"
                      placeholder="请选择"
                      :rules="[(val)=>required(val,'作业时间')]"
                    >
                      <template v-slot:label>
                        <span>作业时间</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </AppDateTimePicker>
                  </VCol>
                  <VCol cols="12">
                    <VSelect
                      v-model="form.subject"
                      :items="qualityList"
                      item-title="title"
                      item-value="title"
                      :rules="[(val)=>required(val,'关联项目')]"
                      class="input-width-height"
                    >
                      <template v-slot:label>
                        <span>关联项目</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VSelect>
                  </VCol>
                  <VCol cols="12">
                    <VTextField
                      v-model="form.content"
                      :rules="[(val)=>required(val,'作业内容')]"
                    >
                      <template v-slot:label>
                        <span>作业内容</span>
                        <span style="color: red;margin-left: 4px;">*</span>
                      </template>
                    </VTextField>
                  </VCol>
                  <!--                  年级选择器-->

                </VRow>
              </VForm>
            </VCardText>
          </PerfectScrollbar>
        </VCard>

      </div>

    </VDialog>

  </div>
</template>

<style lang="scss" scoped>
.community-box {
  width: 80px;
  height: 30px;
  background-color: #16B1FF29;
  border-radius: 50px;
  color: #16B1FF;
  line-height: 30px;
  text-align: center;
}

.cooperation {
  background-color: rgba(255, 180, 0, 0.16);
  color: rgba(255, 180, 0, 1);
}
.content {
  background-color: rgba(var(--v-theme-surface));
}
//.tabs{
//  margin-left: 30px;
//  display: flex;
//  align-items: center;
//  .active{
//
//    background-color:rgba(140, 87, 255, 0.16);
//    border-radius: 6px;
//    color: rgba(140, 87, 255, 1);
//  }
//  .item{
//    padding: 22px 0;
//    display: flex;
//    align-items: center;
//    justify-content: center;
//    display: flex;
//    font-size: 16px;
//    align-items: center;
//    width: 128px;
//    height:38px;
//    margin-right: 4px;
//    cursor: pointer;
//    >i{
//      font-size: 18px;
//      margin-right: 4px;
//    }
//  }
//}
</style>
